<!--
 * @Description: 标题
 * @Author BPF
 * @create 2021/08/5 17:57
 -->

<!--default-->
<script>
export default { name: 'g-title' }
</script>

<!--setup-->
<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'primary',
    validator: val => {
      return ['primary', 'warning', 'success', 'error'].includes(val)
    }
  },

  dark: {
    // 是否深色
    type: Boolean,
    default: false
  }
})
</script>

<!--render-->
<template>
  <div :class="['page-title', `page-title--${props.type}`, dark && `page-title--${props.type}-dark`]">
    <slot></slot>
  </div>
</template>

<!--style-->
<style scoped lang="less">
.page-title {
  color: #333;
  position: relative;
  padding: 0.08rem 0 0.08rem 0.24rem;
  display: flex;
  align-items: center;
  font-size: 0.32rem;
  min-height: 0.6rem;
  box-sizing: border-box;
  //font-weight: bold;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    height: calc(100% - 0.26rem);
    border-radius: 0.08rem;
    width: 0.08rem;
    background: @primary-color;
  }
  &.page-title--primary {
    &:before {
      background: @primary-color;
    }
    &.page-title--primary-dark {
      background-color: rgba(@primary-color, 0.08);
      color: @primary-color;
    }
  }
  &.page-title--success {
    &:before {
      background: @success-color;
    }
    &.page-title--success-dark {
      background-color: rgba(@success-color, 0.08);
      color: @success-color;
    }
  }
  &.page-title--warning {
    &:before {
      background: @warning-color;
    }
    &.page-title--warning-dark {
      background-color: rgba(@warning-color, 0.08);
      color: @warning-color;
    }
  }
  &.page-title--error {
    &:before {
      background: @danger-color;
    }
    &.page-title--error-dark {
      background-color: rgba(@danger-color, 0.08);
      color: @danger-color;
    }
  }
}
</style>
